/**
 * @fileoverview Settings panel for Coding in Chrome editor.
 *
 * @license Copyright 2015 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */
{namespace cwc.soy.ui.SettingScreen autoescape="strict"}


/**
 * Main HTML template for the editor.
 */
{template .template}
  {@param prefix: string}
  {@param languages: list<string>}

  <div id="{$prefix}body">
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <span class="mdl-layout-title">
            {msg desc=""}@@SETTING_SCREEN__TITLE{/msg}
          </span>
        </div>
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
          <a href="#settings-tab-general" class="mdl-layout__tab is-active">
            {msg desc=""}@@SETTING_SCREEN__GENERAL{/msg}
          </a>
          <a href="#settings-tab-sections" class="mdl-layout__tab">
            {msg desc=""}@@SETTING_SCREEN__SECTIONS{/msg}
          </a>
          <a href="#settings-tab-modules" class="mdl-layout__tab">
            {msg desc=""}@@SETTING_SCREEN__MODULES{/msg}
          </a>
          <a href="#settings-tab-editor" class="mdl-layout__tab">
            {msg desc=""}@@SETTING_SCREEN__EDITOR{/msg}
          </a>
          <a href="#settings-tab-misc" class="mdl-layout__tab">
            {msg desc=""}@@SETTING_SCREEN__MISC{/msg}
          </a>
        </div>
      </header>
      <main class="mdl-layout__content">
        <section class="mdl-layout__tab-panel is-active" id="settings-tab-general">
          <div class="page-content">
            {call .generalTab data="all" /}
          </div>
        </section>
        <section class="mdl-layout__tab-panel" id="settings-tab-sections">
          <div class="page-content">
            {call .sectionsTab data="all" /}
          </div>
        </section>
        <section class="mdl-layout__tab-panel" id="settings-tab-modules">
          <div class="page-content">
            {call .modulesTab data="all" /}
          </div>
        </section>
        <section class="mdl-layout__tab-panel" id="settings-tab-editor">
          <div class="page-content">
            {call .editorTab data="all" /}
          </div>
        </section>
        <section class="mdl-layout__tab-panel" id="settings-tab-misc">
          <div class="page-content">
            {call .miscTab data="all" /}
          </div>
        </section>
      </main>
    </div>
  </div>
  <a href="#" id="{$prefix}close" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">
    {msg desc=""}@@SETTING_SCREEN__CLOSE{/msg}
    <span class="mdl-button__ripple-container">
      <span class="mdl-ripple is-animating" style="width: 255.952px; height: 255.952px; transform: translate(-50%, -50%) translate(33px, 22px);"></span>
    </span>
  </a>
{/template}


/**
 * General tab.
 */
{template .generalTab private="true"}
  {@param prefix: string}
  {@param languages: list<string>}

  <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
    <div class="mdl-card mdl-cell mdl-cell--12-col">

      {call .header_}
        {param title: 'General Settings' /}
        {param text: 'This screen allows you to change the default settings' /}
      {/call}
      <ul class="mdl-list">

        {call .setting_ data="all"}
          {param title: 'Show welcome screen' /}
          {param text: 'If enabled, a welcome screen will show every time CwC is started with the choice between "beginner mode" and "advanced mode".' /}
          {param type: 'checkbox' /}
          {param id: 'show-welcome' /}
        {/call}

        {call .setting_ data="all"}
          {param title: 'Advanced Mode' /}
          {param text: 'The "advanced mode" will turn off all block-based options' /}
          {param type: 'switch' /}
          {param id: 'advanced-mode' /}
        {/call}

        {call .setting_ data="all"}
          {param title: 'Launch in fullscreen' /}
          {param text: 'If enabled, CwC will be launched in fullscreen' /}
          {param type: 'checkbox' /}
          {param id: 'fullscreen' /}
          {param opt_restart: true /}
        {/call}

        // Language settings
        <li class="mdl-list__item mdl-list__item--three-line">
          <span class="mdl-list__item-primary-content">
            <span>Language *</span>
            <span class="mdl-list__item-text-body">
              {msg desc=""}Default UI language.{/msg}
            </span>
          </span>
          <span class="mdl-list__item-secondary-content">
            <button id="menu-ui-language" class="mdl-button mdl-js-button mdl-button--icon">
              <i class="material-icons">more_vert</i>
            </button>
            <ul id="{$prefix}language" class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect" data-mdl-for="menu-ui-language">
              {foreach $language in $languages}
                <li class="mdl-menu__item">{$language}</li>
              {/foreach}
            </ul>
          </span>
        </li>

        {call .setting_ data="all"}
          {param title: 'Show What\'s New' /}
          {param text: 'Show a list new features when Coding with Chrome is updated.' /}
          {param type: 'checkbox' /}
          {param id: 'show-whats_new' /}
        {/call}
      </ul>

      <div class="mdl-card__supporting-text">
        * {msg desc=""}@@SETTING_SCREEN__NOTE_RESTART{/msg}
      </div>
    </div>
  </section>
{/template}


/**
 * Sections tab.
 */
{template .sectionsTab private="true"}
  {@param prefix: string}

  <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
    <div class="mdl-card mdl-cell mdl-cell--12-col">

      {call .header_}
        {param title: 'Sections' /}
        {param text: 'This screen allows you to enable/disable the different kinds of sections' /}
      {/call}

      <ul class="mdl-list">
        {call .setting_ data="all"}
          {param title: 'Robots' /}
          {param text: 'Disable Robot section' /}
          {param type: 'switch' /}
          {param id: 'section-roboter' /}
          {param opt_checked: true /}
        {/call}
      </ul>

      <div class="mdl-card__supporting-text">
        * {msg desc=""}@@SETTING_SCREEN__NOTE_RESTART{/msg}
      </div>
    </div>
  </section>
{/template}


/**
 * Modules tab.
 */
{template .modulesTab private="true"}
  {@param prefix: string}

  <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
    <div class="mdl-card mdl-cell mdl-cell--12-col">

      {call .header_}
        {param title: 'Modules' /}
        {param text: 'This screen allows you to enable/disable the different kinds of modules' /}
      {/call}

      {call .subHeader_}
        {param title: 'Robots' /}
        {param text: 'Specific robot modules' /}
      {/call}
      <ul class="mdl-list">
        {call .setting_ data="all"}
          {param title: 'Lego module' /}
          {param text: 'Mindstorm EV3' /}
          {param type: 'switch' /}
          {param id: 'mode-lego' /}
          {param opt_checked: true /}
        {/call}

        {call .setting_ data="all"}
          {param title: 'Sphero module' /}
          {param text: 'Sphero 2.0, Sphero SPRK+, Sphero BB-8' /}
          {param type: 'switch' /}
          {param id: 'mode-sphero' /}
          {param opt_checked: true /}
        {/call}

        {call .setting_ data="all"}
          {param title: 'MakeBlock' /}
          {param text: 'mBot Blue and mbot Ranger' /}
          {param type: 'switch' /}
          {param id: 'mode-makeblock' /}
          {param opt_checked: true /}
        {/call}

      </ul>

      {call .subHeader_}
        {param title: 'Programming language' /}
        {param text: 'Text-based programming languages' /}
      {/call}
      <ul class="mdl-list">
        {call .setting_ data="all"}
          {param title: 'JavaScript module' /}
          {param text: 'Use JavaScript to create programs' /}
          {param type: 'switch' /}
          {param id: 'mode-javascript' /}
          {param opt_checked: true /}
        {/call}

        {call .setting_ data="all"}
          {param title: 'CoffeeScript module' /}
          {param text: 'Use the simple CoffeeScript language to create programs' /}
          {param type: 'switch' /}
          {param id: 'mode-coffeescript' /}
          {param opt_checked: true /}
        {/call}

        {call .setting_ data="all"}
          {param title: 'Python module' /}
          {param text: 'Use the advanced Python language to create programs' /}
          {param type: 'switch' /}
          {param id: 'mode-python' /}
          {param opt_checked: true /}
        {/call}

        {call .setting_ data="all"}
          {param title: 'Pencil Code module' /}
          {param text: 'Draw art, play music or create games' /}
          {param type: 'switch' /}
          {param id: 'mode-pencil_code' /}
          {param opt_checked: true /}
        {/call}
      </ul>

      {call .subHeader_}
        {param title: 'Markup language' /}
        {param text: 'Website modules' /}
      {/call}
      <ul class="mdl-list">
        {call .setting_ data="all"}
          {param title: 'HTML5 module' /}
          {param text: 'Create applications and websites using HTML, CSS and JavaScript' /}
          {param type: 'switch' /}
          {param id: 'mode-html5' /}
          {param opt_checked: true /}
        {/call}
      </ul>

      <div class="mdl-card__supporting-text">
        * {msg desc=""}@@SETTING_SCREEN__NOTE_RESTART{/msg}
      </div>
    </div>
  </section>
{/template}


/**
 * Editor tab.
 */
{template .editorTab private="true"}
  {@param prefix: string}

  <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
    <div class="mdl-card mdl-cell mdl-cell--12-col">

      {call .header_}
        {param title: 'Editor settings' /}
        {param text: 'This screen allows you to change some editor settings' /}
      {/call}
      <ul class="mdl-list">
        // Auto-complete
        {call .setting_ data="all"}
          {param title: 'Auto-complete' /}
          {param text: 'Use Auto-Complete List to suggest text when typing.' /}
          {param type: 'switch' /}
          {param id: 'auto-complete' /}
        {/call}

      </ul>
    </div>
  </section>
{/template}


/**
 * Misc tab.
 */
{template .miscTab private="true"}
  {@param prefix: string}

  <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
    <div class="mdl-card mdl-cell mdl-cell--12-col">

      {call .header_}
        {param title: 'Misc settings' /}
        {param text: 'This screen allows you to change some advanced settings' /}
      {/call}
      <ul class="mdl-list">

        {call .setting_ data="all"}
          {param title: 'Debug mode' /}
          {param text: 'The "debug mode" will turn on some additional debug options' /}
          {param type: 'switch' /}
          {param id: 'debug-mode' /}
          {param opt_restart: true /}
        {/call}

        {call .setting_ data="all"}
          {param title: 'Experimental mode' /}
          {param text: 'The "experimental mode" will turn on some experimental options. Enable this at your own risk, no support or guarantee is provided.' /}
          {param type: 'switch' /}
          {param id: 'experimental-mode' /}
          {param opt_restart: true /}
        {/call}

        {call .setting_ data="all"}
          {param title: 'Fetch new tutorials from Workbench' /}
          {param text: 'New projects that are available from Workbench will be downloaded every time the application is restarted.' /}
          {param type: 'switch' /}
          {param id: 'workbench-fetch' /}
          {param opt_restart: true /}
        {/call}

        {call .setting_ data="all"}
          {param title: 'Teacher Mode (Beta)' /}
          {param text: 'Allow tutorials to be edited.' /}
          {param type: 'switch' /}
          {param id: 'teacher-mode' /}
          {param opt_restart: false /}
        {/call}
      </ul>

      <div class="mdl-card__supporting-text">
        * {msg desc=""}@@SETTING_SCREEN__NOTE_RESTART{/msg}
      </div>
    </div>
  </section>
{/template}


/**
 * Settings entry.
 */
{template .setting_ private="true"}
  {@param prefix: string}
  {@param title: string}
  {@param text: string}
  {@param type: string}
  {@param id: string}
  {@param? opt_restart: bool}
  {@param? opt_checked: bool}

  <li class="mdl-list__item mdl-list__item--three-line">
    <span class="mdl-list__item-primary-content">
      <span>
        {msg desc=""}{$title}{/msg} {if $opt_restart}*{/if}
      </span>
      <span class="mdl-list__item-text-body">
        {msg desc=""}{$text}{/msg}
      </span>
    </span>
    <span class="mdl-list__item-secondary-content">

      {switch $type}
        {case 'checkbox'}
          <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="{$prefix}{$id}">
            <input type="checkbox" id="{$prefix}{$id}" class="mdl-checkbox__input"{if $opt_checked} checked{/if} />
          </label>
        {case 'switch'}
          <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="{$prefix}{$id}">
            <input type="checkbox" id="{$prefix}{$id}" class="mdl-switch__input"{if $opt_checked} checked{/if} />
          </label>
      {/switch}

    </span>
  </li>
{/template}


/**
 * Page header.
 */
{template .header_ private="true"}
  {@param title: string}
  {@param text: string}
  <div class="mdl-card__supporting-text">
    <h4>{msg desc="header title"}{$title}{/msg}</h4>
    {msg desc="header text"}{$text}{/msg}
  </div>
{/template}


/**
 * Page sub header.
 */
{template .subHeader_ private="true"}
  {@param title: string}
  {@param text: string}
  <div class="mdl-card__supporting-text">
    <h5>{msg desc="header title"}{$title}{/msg}</h5>
    {msg desc="header text"}{$text}{/msg}
  </div>
{/template}
